<template>
	<view>
		<view class="top_box">
			<image src="../../static/index1/71.png" mode="widthFix"></image>
			<view class="mt50 f40 fweib">
				欢迎登录使用
			</view>
		</view>
		
		<view class="login_cen">
			<view class="">
				<view class="d-s-c handset_item">
					<view class="handset_item_input">
						<image src="/static/index1/72.png" mode="widthFix"></image>
						<u-input :custom-style="{background:'#fff',padding:'0 20rpx'}" type="text" v-model="account" placeholder="请输入账号" />
						<!-- <input type="number" maxlength="11" v-model="mobile" placeholder="请输入手机号"  />
						<view class="clear-icon" @click.stop="clearValue">
							<u-icon name="close" color="#fff" size="28"></u-icon>
						</view> -->
					</view>
				</view>
				<view class="d-s-c handset_item">
					<view class="d-b-c handset_item_input">
						<image src="/static/index1/73.png" mode="widthFix"></image>
						<u-input :type="inputType" :custom-style="{background:'#fff',padding:'0 20rpx'}" placeholder="请输入密码" v-model="password" :password-icon="false" />
						<view class="ml20" @click="changePassword()">
							<view class="" v-if="passwordShow">
								<u-icon name="eye-fill" color="#999999" size="36"></u-icon>
							</view>
							<view class="" v-else>
								<u-icon name="eye-off" color="#999999" size="36"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="handset_login" @click="userRegisterORLogin()">
			{{ login ? '登录' : '注册' }}
		</view>
		
		<!-- 底部 -->
		<view class="login_xieyi f24 gray9 d-c-c" @click="isRead=!isRead" v-if="!login">
			<view class="d-s-c">
				<view :class="isRead ? 'active agreement' : 'agreement'"></view>
				我已阅读并同意<text @click.stop="goAgree()">《隐私保护政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '', //跳转地址
				login: true,
				account: '', //账号
				code: '', //验证码
				codeShow: true, //验证码是倒计时还是获取
				codeTime: 60, //验证码倒计时
				timer: null,
				isRead: false, //是否同意用户协议
				password: '', //登录注册密码
				passwordShow: false,//密码显示
				inputType: "password", //密码输入框类型
				inviteCode: '',
			}
		},
		onLoad(options) {
			if (options.url) {
				this.url = options.url
			} else {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					this.url = '/' + pages[pages.length - 2].route
				}
			}
		},
		methods: {
			clearValue(){
				this.account = ''
			},
			tiaoguoloing() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 切换是否查看密码
			changePassword(){
				this.passwordShow = !this.passwordShow
				if (this.passwordShow) {
					this.inputType = "text"
				} else {
					this.inputType = "password"
				}
			},
			// 注册
			userRegisterORLogin() {
				if (this.account == '’') {
					uni.$u.toast('请输入账号')
					return false
				}
				if (this.password == '') {
					uni.$u.toast('请输入密码')
					return false
				}

				if (this.login) {
					// 登录
					uni.showLoading({
						title: '正在登录...'
					})
					this.$u.post(this.$u.api.login, {
						account: this.account,
						password: this.password
					}).then((res) => {
						uni.hideLoading()
						this.$store.dispatch('userLogin', res.data.userinfo)
						uni.$u.toast('登录成功')
						setTimeout(() => {
							if (this.url) {
								this.utils.goPage(this.url)
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						}, 2000)
					}).catch((err) => {
						console.log(err)
						uni.hideLoading()
						uni.$u.toast(err.data.msg)
					})
				} else {
					if (this.code == '') {
						uni.$u.toast('请输入验证码')
						return false
					}
					if (this.inviteCode == '') {
						uni.$u.toast('请输入邀请码')
						return false
					}
					if (!this.isRead) {
						uni.$u.toast('请同意并勾选协议内容')
						return false
					}
					// 注册
					uni.showLoading({
						title: '正在注册...'
					})
					this.$u.post(this.$u.api.register, {
						mobile: this.mobile,
						code: this.code,
						password: this.password,
						invite_code: this.inviteCode,
					}).then((res) => {
						uni.hideLoading()
						this.$store.dispatch('userLogin', res.data.userinfo)
						uni.$u.toast('注册成功')
						setTimeout(() => {
							if (this.url) {
								this.utils.goPage(this.url)
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						}, 2000)
					}).catch((err) => {
						console.log(err)
						uni.hideLoading()
						uni.$u.toast(err.data.msg)
					})
				}
			},
			// 获取短信验证码
			getCode() {
				if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
					uni.$u.toast('请输入正确的手机号')
					return false
				}
				uni.showLoading({
					title: '正在发送...'
				})
				this.$u.post(this.$u.api.smsSend, {
					mobile: this.mobile,
					event: 'register'
				}).then((res) => {
					uni.$u.toast('发送成功')
					this.codeShow = false
					this.timer = setInterval(() => {
						if (this.codeTime <= 1) {
							timer&&clearInterval(timer)
							this.codeTime = 60
							this.codeShow = true
						} else {
							this.codeTime--
						}
					}, 1000)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 去隐私协议
			goAgree() {
				uni.navigateTo({
					url: ''
				})
			},
			// 登录注册切换
			changeLogin() {
				this.mobile = ''
				this.code = ''
				this.password = ''
				this.login = !this.login
			},
		}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100vh;
		background: linear-gradient(to bottom,#d4ecff 50%,#fff 70%);
	}

	.top_box {
		width: 100%;
		height: 618rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		image {
			width: 40%;
		}
		.top_box_img {
			
		}

		.top_box_img_text {
			// position: absolute;
			top: 100rpx;
			left: 40rpx;
			color: #FFFFFF;
			font-size: 46rpx;
			font-weight: bold;
		}
	}

	.login_cen {
		margin-top: 75rpx;
	}

	.login_phone {
		width: 635rpx;
		height: 96rpx;
		background: #477EF5;
		border-radius: 15rpx;
		margin: 0 auto 40rpx;
		color: #FFFFFF;
	}

	.login_phone image {
		width: 39rpx;
		height: 39rpx;
		margin-right: 15rpx;
	}

	.login_pass {
		width: 635rpx;
		height: 96rpx;
		background: #FFFFFF;
		border: 2rpx solid #CCCCCC;
		border-radius: 15rpx;
		margin: 0 auto;
	}

	.login_pass image {
		width: 39rpx;
		height: 39rpx;
		margin-right: 15rpx;
	}

	.login_xieyi {
		margin-top: 40rpx;
	}

	.login_xieyi text {
		color: #387BEF;
	}

	.handset_title {
		font-size: 66rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin: 150rpx 0 70rpx 30rpx;
	}

	.handset_item {
		width: 670rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 50rpx;
		padding: 0 30rpx;
		margin: 0 auto 40rpx;

	}

	.handset_item_input {
		width: 100%;
		display: flex;
		align-items: center;
		.u-input{
			background-color: #fff;
		}
		
		
		image{
			width: 40rpx;
		}
	}
	
	input:-internal-autofill-selected{
		background-color: #fff !important;
	}
	
	

	.handset_item_code {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #387BEF
	}

	.handset_login {
		width: 670rpx;
		height: 100rpx;
		// background: linear-gradient(90deg, #1F93FF, #4BB0FF);
		background-color: #4BB0FF;
		border-radius: 50rpx;
		text-align: center;
		line-height: 95rpx;
		margin: 0 auto 20rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin-top: 66rpx;
	}

	.agreement {
		border-radius: 50%;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid #999999;
		background: #fff;
		position: relative;
		margin-right: 10rpx;
		box-sizing: border-box;
	}

	.agreement.active::after {
		content: '';
		width: 16rpx;
		height: 16rpx;
		background-color: #75A4FB;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.register-box {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		margin: 60rpx auto 0;
	
		.text {
			color: #387BEF;
		}
	}
</style>
